specificity 詳細度 css

例

クラスセレクターは、要素セレクターよりも詳細度が高い

code:speceficity.css

//クラスセレクタのこちらが優先

.main-heading {

color: red;

}

h1 {

color: blue;

}

詳細

セレクターが持つ詳細度の量は、4 つ の異なる値（またはコンポーネント）を使用して測定

1.「1,000」 宣言が style 属性（別名、インラインスタイル）内にある場合

このような宣言にはセレクターがないため、その詳細度は常にシンプルに 1,000

2.「100」 全体のセレクターの内部にある ID セレクター

3.「10」 全体のセレクターの内部にあるクラスセレクター・属性セレクター・擬似クラス

4.「1」 全体のセレクターの内部にある要素セレクターまたは疑似要素

※ただし、下位の量で上位を上書きすることはできない

!important